<template>
  <div class="controller">
    <!-- 头部 -->
    <Headline
        :headline1="$t('m.EquipmentCenter') + '  /  '"
        :headline2="$t('m.ControllerAndDev')"
    ></Headline>
    <a-card style="width: 100%">
      <div class="search">
        <div class="search-a ov_flex">
          <a-select
              class="select-a"
              v-model="deviceList.devClass"
              @change="contSelectChange"
          >
            <a-select-option
                v-for="item in dictionariesA"
                :value="item.code"
                :key="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-input-search
              class="input-a"
              :placeholder="$t('m.PleaseEnterYourSearchTerms')"
              v-model="deviceList.key"
              size="default"
              @search="contSearch"
          />
        </div>
        <a-tree-select
            v-model="value"
            show-search
            style="width: 30%; height: 32px; margin-left: 15px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            allow-clear
            @change="contchecked"
            tree-default-expand-all
        >
          <a-tree-select-node
              v-for="item in contTree"
              :key="item.id"
              :cont="item"
              :value="item.id"
              :title="item.areaname"
          >
            <a-tree-select-node
                v-for="int in item.children"
                :key="int.id"
                :cont="int"
                :value="int.id"
                :title="int.areaname"
            >
              <a-tree-select-node
                  v-for="ins in int.children"
                  :key="ins.id"
                  :cont="ins"
                  :value="ins.id"
                  :title="ins.areaname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
        <div class="btns">
          <a-button
              @click="addconts"
              type="primary"
              style="width: 100%; height: 32px"
              v-if="isTrue('dev:manage:add')"
          >
            {{ $t("m.Add") }}
          </a-button>
        </div>

        <div class="chend">
          <a-checkbox :defaultChecked="deviceList.vChild" @change="contChange">
            {{ $t("m.WhetherToDisplayChildNodes") }}
          </a-checkbox>
        </div>
      </div>
      <!-- 表格 -->
      <div class="conter-table">
        <div id="components-table-demo-size">
          <a-table
              :rowKey="(r, i) => i.toString()"
              :columns="columns"
              :data-source="datas"
              bordered
              :pagination="false"
          >
            <div slot="color" slot-scope="text, tags">
              <div class="reds" v-if="tags.devstatus == 0">离线</div>
              <div class="greens" v-else-if="tags.devstatus == 1">在线</div>
            </div>
            <div slot="tags" slot-scope="text, tags, i">
              <a-button
                  style="margin-left: 10px"
                  @click="contchangeds(text, tags, i)"
                  type="primary"
                  icon="edit"
                  v-if="isTrue('dev:manage:update')"
              >{{ $t("m.Modification") }}
              </a-button
              >
              <a-button
                  style="margin-left: 10px"
                  type="danger"
                  icon="delete"
                  :disabled="!isTrue('dev:manage:del')"
                  @click="contdeletes(text, tags, i)"
              >{{ $t("m.Delete") }}
              </a-button
              >
            </div>
          </a-table>
          <a-pagination
              class="pages"
              show-size-changer
              :defaultPageSize="5"
              :default-current="1"
              :total="total"
              @change="contPages"
              :pageSizeOptions="['5', '10', '30', '40']"
              @showSizeChange="onShowcontChange"
          />
        </div>
      </div>
    </a-card>
    <!-- 新增弹窗 -->
    <Modal :modal="moadl" @modalLast="contOk" @modalhand="conthand">
      <span class="devArea" style="margin-left:81px;">所属区域：</span>
      <a-tree-select
          v-model="areaValue"
          show-search
          style="width: 200px; height: 32px;"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="areachecked"
          tree-default-expand-all
      >
        <a-tree-select-node
            v-for="item in contTree"
            :key="item.id"
            :cont="item"
            :value="item.id"
            :title="item.areaname"
        >
          <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.id"
              :title="int.areaname"
          >
            <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.id"
                :title="ins.areaname"
            />
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select>
      <a-form :form="form">
        <div class="fromlist">
          <a-form-item :label="$t('m.Equipmentserialnumber')">
            <a-input
                v-decorator="['devSn',{ rules: [{ required: true, message: '请输入设备序列号' }] },]"
                v-model.trim="contfromlist.devSn"
                style="width: 200px"/>
          </a-form-item>
          <a-form-item :label="$t('m.DeviceType')">
            <a-select
                class="select-a"
                v-model="contfromlist.devClass"
                @change="devChange"
            >
              <a-select-option
                  v-for="item in dictionariesB"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.Equipmentmodel')">
            <a-select class="select-a" v-model="contfromlist.devModel">
              <a-select-option
                  v-for="item in dictionariesC"
                  :value="item.code"
                  :key="item.code"
              >
                {{ item.name }}
              </a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.EquipmentNumber')">
            <a-input
                v-decorator="['machineId',{ rules: [{ required: true, message: '请输入设备机号' }] },]"
                v-model.trim="contfromlist.machineId"/>
          </a-form-item>
          <a-form-item :label="$t('m.EquipmentName')">
            <a-input
                v-decorator="['devName',{ rules: [{ required: true, message: '请输入设备名称' }] },]"
                v-model.trim="contfromlist.devName"/>
          </a-form-item>
          <a-form-item :label="$t('m.EquipmentAddress')">
            <a-input
                v-decorator="['devIp',{ rules: [{ required: true, message: '请输入设备地址' }] },]"
                v-model.trim="contfromlist.devIp"/>
          </a-form-item>
          <a-form-item :label="$t('m.CommunicationPort')">
            <a-input-number
                id="inputNumber"
                v-model="contfromlist.devPort"
                :min="1"
                :max="1000000"
            />
          </a-form-item>
          <a-form-item :label="$t('m.objectClassification')">
            <a-select
                class="select-a"
                v-model="contfromlist.useClass"
                @change="devsChang"
            >
              <a-select-option
                  v-for="item in dictionariesD"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('m.EquipmentUse')">
            <a-select class="select-a" v-model="contfromlist.used">
              <a-select-option
                  v-for="item in dictionariesE"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </a-form-item>
        </div>
        <a-table
            :columns="column"
            :dataSource="contfromlist.door"
            :pagination="false"
            :rowKey="(r, i) => i"
            bordered
        >
          <template slot="title"> 读头与受控电继器</template>
          <div slot="equipment" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-input v-model.trim="contfromlist.door[i].name"/>
          </div>
          <div slot="equipment" slot-scope="text, tags, i" v-else>
            <div>{{ contfromlist.door[i].name }}</div>
          </div>
          <div slot="enter" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-select
                class="select-a select-b"
                v-model="contfromlist.door[i].inoutType"
            >
              <a-select-option
                  v-for="item in dictionariesG"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </div>
          <div slot="enter" slot-scope="text, tags, i" v-else>
            <!-- <div>{{tags.inoutname}}</div> -->
            <div v-if="contfromlist.door[i].inoutType == 1">进</div>
            <div v-if="contfromlist.door[i].inoutType == 2">出</div>
          </div>
          <div slot="readt" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-select
                class="select-a select-b"
                v-model="contfromlist.door[i].readHead"
            >
              <a-select-option
                  v-for="item in dictionariesF"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </div>
          <div slot="readt" slot-scope="text, tags, i" v-else>
            <div v-if="contfromlist.door[i].readHead == ''"><p></p></div>
            <div v-else-if="contfromlist.door[i].readHead == 0">1号读头</div>
            <div v-else-if="contfromlist.door[i].readHead == 1">2号读头</div>
            <div v-else-if="contfromlist.door[i].readHead == 2">3号读头</div>
            <div v-else-if="contfromlist.door[i].readHead == 3">4号读头</div>
          </div>
          <div slot="wiring" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-select
                class="select-a select-b"
                v-model="contfromlist.door[i].relays"
            >
              <a-select-option
                  v-for="item in dictionariesH"
                  :value="item.code"
                  :key="item.code"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </div>
          <div slot="wiring" slot-scope="text, tags, i" v-else>
            <div v-if="contfromlist.door[i].relays == ''"><p></p></div>
            <div v-else-if="contfromlist.door[i].relays == 0">1号继电器</div>
            <div v-else-if="contfromlist.door[i].relays == 1">2号继电器</div>
            <div v-else-if="contfromlist.door[i].relays == 2">3号继电器</div>
            <div v-else-if="contfromlist.door[i].relays == 3">4号继电器</div>
          </div>
          <div slot="voice" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-input v-model.trim="contfromlist.door[i].voice"/>
          </div>
          <div slot="voice" slot-scope="text, tags, i" v-else>
            <div>{{ contfromlist.door[i].voice }}</div>
          </div>
          <div slot="reads" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-select
                class="select-a select-b"
                v-model="contfromlist.door[i].readDevId"
            >
              <a-select-option
                  v-for="item in dictionariesI"
                  :value="item.id"
                  :key="item.id"
              >{{ item.name }}
              </a-select-option
              >
            </a-select>
          </div>
          <div slot="reads" slot-scope="text, tags, i" v-else>
            <!-- <div v-if="contfromlist.door[i].readDevId === 0">普通读头</div>
            <div v-else-if="contfromlist.door[i].readDevId == ''"></div> -->
            <div v-for="item in dictionariesI" :key="item.id">
              <div v-if="item.id == contfromlist.door[i].readDevId">{{ item.name }}</div>
              <div v-else></div>
            </div>
          </div>
          <div class="widthbtn" slot="tags" slot-scope="text, tags, i" v-if="tags.isNew">
            <a-button
                class="btn"
                type="primary"
                icon="diff"
                @click="contvmo(text, tags, i)"
            >{{ $t("m.Save") }}
            </a-button
            >
            <a-button
                class="btn btns"
                type="danger"
                icon="diff"
                @click="deletevmos(text, tags, i)"
            >{{ $t("m.Delete") }}
            </a-button
            >
          </div>
          <div slot="tags" slot-scope="text, tags, i" v-else>
            <a-button
                class="btn"
                type="primary"
                icon="diff"
                @click="contvmos(text, tags, i)"
            >{{ $t("m.Modification") }}
            </a-button
            >
            <a-button
                class="btn btns"
                type="danger"
                icon="diff"
                @click="deletevmos(text, tags, i)"
            >{{ $t("m.Delete") }}
            </a-button
            >
          </div>
        </a-table>
        <a-button
            style="width: 100%; margin-top: 16px; margin-bottom: 8px"
            type="dashed"
            icon="plus"
            @click="newMember"
        >{{ $t("m.AddingDeviceInformation") }}
        </a-button
        >
      </a-form>
    </Modal>
    <Delete ref="contdelete" :dalete="dalete" @confirm="contdeleteId"></Delete>
    <Delete ref="userdelete" :dalete="daletes" @confirm="userdelete"></Delete>
  </div>
</template>


<script>
import Headline from "@/components/Headline";
import Modal from "@/components/common/Modal";
import Delete from "@/components/Delete";
import {
  getDevAreaTree,
  getDeviceList,
  getSaveDevice,
  getDeleteDevice,
  getDeviceReadList,
  saveDeviceRead,
  deleteReadById,
  getReadDeviceList,
} from "@/api/perUnit";
import { getdiction,saveDevice } from "@/api/dictionaries";
import { Setperms } from "@/assets/js/setperms";
export default {
  name: "Unitcontroller",
  components: {
    Headline,
    Modal,
    Delete,
  },
  data() {
    return {
      custid: "",
      moadl: {
        visible: false,
        width: "1150px",
        title: this.$t("m.AddingDevice"),
      },
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      daletes: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      fromdic: {
        groupcode: "SYS0000010",
        insertall: "0|全部",
        where: "code<> -1 and code <> -100",
      },
      fromdicB: {
        groupcode: "SYS0000010",
        where: "code<> -1 and code <> -100",
      },
      fromdicC: {
        groupcode: "SYS0000022",
        insertall: "",
        where: "concat(',',attr2,',') like '%,2,%'",
      },
      fromdicD: {
        groupcode: "SYS0000038",
        insertall: "",
        where: "",
      },
      fromdicE: {
        groupcode: "SYS0000020",
        insertall: "",
        where: "concat(',',attr1,',') like '%,1,%'",
      },
      fromdicF: {
        groupcode: "SYS0000016",
        insertall: "",
        where: "",
      },
      fromdicG: {
        groupcode: "SYS0000018",
        insertall: "",
        where: "",
      },
      fromdicH: {
        groupcode: "SYS0000017",
        insertall: "",
        where: "",
      },
      fromdicI: {
        table: "tb_dev_accesscontroller",
        insertall: "刷卡读头",
        where:
            "(devmodel in(SELECT code FROM tb_sys_dictionary where parentcode='SYS0000022' and attr3 in('2','3')) and  (devclass in('11') or not id in(select distinct readdevid from tb_dev_doorreadhead where (not readdevid is null and readdevid<>''))) )",
        fields: "id,machineid,devname as name,devclass",
        orderby: "id asc",
      },
      value: "",
      areaValue:"",
      contTree: [],
      tagsId: "",
      columns: [
        {
          title: this.$t("m.EquipmentNumber"),
          dataIndex: "machineid",
        },
        {
          title: this.$t("m.Name"),
          dataIndex: "devname",
        },
        {
          title: this.$t("m.EquipmentIP"),
          dataIndex: "devip",
        },
        {
          title: this.$t("m.EquipmentUse"),
          dataIndex: "usedname",
        },
        {
          title: this.$t("m.DeviceType"),
          dataIndex: "devclassname",
        },
        {
          title: this.$t("m.Equipmentmodel"),
          dataIndex: "devmodelname",
        },
        {
          title: this.$t("m.Status"),
          dataIndex: "devstatus",
          scopedSlots: {customRender: "color"},
        },
        {
          title: this.$t("m.StatusChangeTime"),
          dataIndex: "modifydate",
        },
        {
          title: this.$t("m.Location"),
          dataIndex: "areaname",
        },

        {
          title: this.$t("m.Operation"),
          key: "tags",
          dataIndex: "address",
          scopedSlots: {customRender: "tags"},
        },
      ],
      column: [
        {
          title: this.$t("m.NameOfAccessControlChannel"),
          key: "equipment",
          dataIndex: "name",
          scopedSlots: {customRender: "equipment"},
        },
        {
          title: this.$t("m.InAndOutOfTheDirection"),
          key: "enter",
          dataIndex: "inoutType",
          scopedSlots: {customRender: "enter"},
        },
        {
          title: this.$t("m.ReadHead"),
          key: "readt",
          dataIndex: "readHead",
          scopedSlots: {customRender: "readt"},
        },
        {
          title: this.$t("m.ControlledRelay"),
          key: "wiring",
          dataIndex: "relays",
          scopedSlots: {customRender: "wiring"},
        },
        {
          title: this.$t("m.Voice"),
          key: "voice",
          dataIndex: "voice",
          scopedSlots: {customRender: "voice"},
        },

        {
          title: this.$t("m.ReadHeadDev"),
          key: "reads",
          dataIndex: "readDevId",
          scopedSlots: {customRender: "reads"},
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          dataIndex: "address",
          scopedSlots: {customRender: "tags"},
        },
      ],
      contfromlist: {
        id: 0,
        devSn: "", //设备序列号
        machineId: "", //机号
        devName: "", //设备名称
        devIp: "", //设备IP
        devPort: "8000", //设备端口
        devStatus: 0, //设备状态
        devClass: "", //设备类型
        devModel: "", //设备型号
        areaCode: "", //区域编号
        useClass: "", //用途分类
        used: "", //设备用途
        //devToken: "", //设备令牌
        door: [],
      },
      formadd: {
        name: "",
        inoutType: "",
        readHead: "",
        relays: "",
        voice: "",
        readDevId: "",
      },
      areaCode: "",
      id: "",
      visfrom: {
        id: 0,
        readHead: "",
        controllerId: "",
        inoutType: "",
        name: "",
        relays: "",
        readDevId: "",
        voice: "",
        areaCode: "",
      },
      dataSource: [],
      datas: [],
      deviceList: {
        areaCode: "",
        devClass: "0",
        vChild: true,
        page: 1,
        key: "",
        start: 0,
        limit: 10,
      },
      total: 0,
      contId: "", //删除设备id
      door: [],
      look: true,
      islok: true,
      index: "",
      dictionariesA: [],
      dictionariesB: [],
      dictionariesC: [],
      dictionariesD: [],
      dictionariesE: [],
      dictionariesF: [],
      dictionariesG: [],
      dictionariesH: [],
      dictionariesI: [],
      checkNick: false,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      areaId: {
        controllerId: "",
      },
    };
  },
  created() {
    this._getDevAreaTree();
    // this._getdiction();
    this.parms = Setperms(
        this.$route.fullPath,
        JSON.parse(sessionStorage.getItem("menu"))
    );
    // saveDevice().then(res => {
    //   console.log(res)
    // })
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    _getdiction() {
      getdiction({params: this.fromdic}).then((res) => {
        // this.dictionariesA = res.data.data;
      });
      // getdiction({ params: this.fromdicB }).then((res) => {
      //   this.dictionariesB = res.data.data;
      // });

      // getdiction({ params: this.fromdicE }).then((res) => {
      //   this.dictionariesE = res.data.data;
      // });
      // getdiction({ params: this.fromdicF }).then((res) => {
      //   this.dictionariesF = res.data.data;
      // });
      // getdiction({ params: this.fromdicG }).then((res) => {
      //   this.dictionariesG = res.data.data;
      // });
      // getdiction({ params: this.fromdicH }).then((res) => {
      //   this.dictionariesH = res.data.data;
      // });
    },
    classLows() {
    },
    newMember() {
      this.visfrom.id = 0;
      this.contfromlist.door.push({
        name: "",
        inoutType: "",
        readHead: "",
        relays: "",
        voice: "",
        readDevId: "0",
        isNew: true,
      });
    },
    //请求树形节点数据
    _getDevAreaTree() {
      getDevAreaTree().then((res) => {
        this.contTree = res.data;
        
        this._chexd();
      });
    },
    //选中节点请求设备信息
    _getDeviceList() {
      getDeviceList({params: this.deviceList}).then((res) => {
        const data = res.data.data;
        this.total = res.data.total;
        this.datas = data;
      });
    },
    areachecked(value,label,extra){
      const cont = extra.triggerNode.$attrs.cont;
      this.contfromlist.areaCode = cont.areacode
      console.log(cont)
    },
    contchecked(value, label, extra) {
      //判断是否选中值了
      if (extra.triggerNode) {
        //获取当前选中的对象信息
        const cont = extra.triggerNode.$attrs.cont;
        this.areaCode = cont.areacode;
        this.deviceList.areaCode = cont.areacode;
        this.contfromlist.areaCode = cont.areacode;
      }
      this._getDeviceList();
    },
    // 默认展示数据
    _chexd() {
      //默认选择第一条数据
      const item = this.contTree[0];
      this.areaCode = item.areacode;
      this.deviceList.areaCode = item.areacode;
      this.contfromlist.areaCode = item.areacode;
      // this.formlists.status = item.status;
      this.value = item.areaname;
      this.areaValue = item.areaname;
      this._getDeviceList();
    },
    //选中类型
    contSelectChange() {
      this._getDeviceList();
    },
    classGetdiction() {
      getdiction({params: this.fromdicC}).then((res) => {
        this.dictionariesC = res.data.data;
        if (res.data.data.length > 0) {
          this.contfromlist.devModel = this.dictionariesC[0].code;
        } else {
          this.contfromlist.devModel = "";
        }
      });
    },
    classGerond() {
      getdiction({params: this.fromdicE}).then((res) => {
        this.dictionariesE = res.data.data;
        if (res.data.data.length > 0) {
          this.contfromlist.used = this.dictionariesE[0].code;
        } else {
          this.contfromlist.used = "";
        }
      });
    },
    devChange(value) {
      this.fromdicC.where = `concat(',',attr2,',') like '%,${value},%'`;
      this.classGetdiction();
    },
    devsChang(value) {
      this.fromdicE.where = `concat(',',attr1,',') like '%,${value},%'`;
      this.classGerond();
    },
    devChange1(value) {
      this.fromdicC.where = `concat(',',attr2,',') like '%,${value},%'`;
      getdiction({params: this.fromdicC}).then((res) => {
        this.dictionariesC = res.data.data;
      });
    },
    devsChang2(value) {
      this.fromdicE.where = `concat(',',attr1,',') like '%,${value},%'`;
      getdiction({params: this.fromdicE}).then((res) => {
        this.dictionariesE = res.data.data;
      });
    },
    //新增
    async addconts() {
      setTimeout(() => {
        this.form.setFieldsValue({
          devIp:"",
          devSn:"",
          devName:"",
          machineId:""
        })
      }, 200);

      this.islok = false;
      this.moadl.title = this.$t("m.AddingDevice");
      let dicorde1 = await getdiction({params: this.fromdicB})
      this.dictionariesB = dicorde1.data.data;
      let dicorde2 = await getdiction({params: this.fromdicD})
      this.dictionariesD = dicorde2.data.data;
      let dicorde3 = await getReadDeviceList()
      this.dictionariesI = dicorde3.data.data;
      let dicorde4 = await getdiction({params: this.fromdicF})
      this.dictionariesF = dicorde4.data.data;
      let dicorde5 = await getdiction({params: this.fromdicG})
      this.dictionariesG = dicorde5.data.data;
      let dicorde6 = await getdiction({params: this.fromdicH})
      this.dictionariesH = dicorde6.data.data;

      this.fromdicC.where = "concat(',',attr2,',') like '%,2,%'";
      this.fromdicE.where = "concat(',',attr1,',') like '%,1,%'";
      this.contfromlist.devPort = "8000";
      this.contfromlist.devClass = this.dictionariesB[0].code;
      this.contfromlist.useClass = this.dictionariesD[0].code;
      this.classGetdiction();
      this.classGerond();
      this.contfromlist.devSn = null
      this.contfromlist.machineId = null
      this.contfromlist.devName = null
      this.contfromlist.devIp = null
      this.moadl.visible = true;
    },
    //新增确认
    contOk() {
      this.form.validateFields(err => {
        if (!err) {
          console.info('success');
          this.form.resetFields();

        }
      });
      if (this.contfromlist.devSn != null && this.contfromlist.machineId != null && this.contfromlist.devName != null && this.contfromlist.devIp != null) {
        this.contfromlist.door = JSON.stringify(this.contfromlist.door);
        getSaveDevice(this.contfromlist)
            .then((res) => {
              const msg = res.data.msg;
              if (res.data.success) {
                this.$message.success(msg);
                this._getDeviceList();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        this.clearfrom();
      }
      this._chexd();
    },
    //清楚数据
    clearfrom() {
      this.moadl.visible = false;
      this.contfromlist.devSn = "";
      this.contfromlist.machineId = "";
      this.contfromlist.devName = "";
      this.contfromlist.devIp = "";
      this.contfromlist.devPort = "";
      this.contfromlist.devClass = "";
      this.contfromlist.devModel = "";
      this.contfromlist.useClass = "";
      this.contfromlist.used = "";
      this.contfromlist.door = [];
      this.contfromlist.id = 0;
    },
    //新增取消
    conthand() {
      this._chexd()
      this.clearfrom();
    },
    //子节点选中
    contChange() {
      this.deviceList.vChild = !this.deviceList.vChild;
      this._getDeviceList();
    },
    //修改按钮的点击
    contchangeds(text, tags, i) {


      setTimeout(() => {
        this.form.setFieldsValue({
          devIp:tags.devip,
          devSn:tags.devsn,
          devName:tags.devname,
          machineId:tags.machineid,
        })
      }, 200);
      // this.contfromlist.devSn = tags.devSn;
      this.form.setFieldsValue({
        
      })
      this.areaId.controllerId = tags.id;
      this.islok = true;
      this.moadl.title = this.$t("m.EditDevice")
      let dicorde1 = new Promise((resolve, reject) => {
        getdiction({params: this.fromdicB}).then((res) => {
          this.dictionariesB = res.data.data;
          resolve(res.data);
        });
      });
      let dicorde2 = new Promise((resolve, reject) => {
        getdiction({params: this.fromdicD}).then((res) => {
          this.dictionariesD = res.data.data;
          resolve(res.data);
        });
      });
      // let dicorde3 = ''
      let dicorde3 = new Promise((resolve, reject) => {
        getReadDeviceList().then((res) => {
          this.dictionariesI = res.data.data;
          console.log(res.data)
          resolve(res.data);
        });
      });
      let dicorde4 = new Promise((resolve, reject) => {
        getdiction({params: this.fromdicF}).then((res) => {
          this.dictionariesF = res.data.data;
          resolve(res.data);
        });
      });
      let dicorde5 = new Promise((resolve, reject) => {
        getdiction({params: this.fromdicG}).then((res) => {
          this.dictionariesG = res.data.data;
          resolve(res.data);
        });
      });
      let dicorde6 = new Promise((resolve, reject) => {
        getdiction({params: this.fromdicH}).then((res) => {
          this.dictionariesH = res.data.data;
          resolve(res.data);
        });
      });

      Promise.all([
        dicorde1,
        dicorde2,
        dicorde3,
        dicorde4,
        dicorde5,
        dicorde6,
      ]).then((res) => {
        this.contfromlist.id = tags.id
        this.contfromlist.devSn = tags.devsn;
        this.contfromlist.machineId = tags.machineid;
        this.contfromlist.devName = tags.devname;
        this.contfromlist.devIp = tags.devip;
        this.contfromlist.devPort = tags.devport;
        this.contfromlist.devClass = tags.devclass;
        this.devChange1(tags.devclass);
        this.contfromlist.devModel = tags.devmodel;
        this.contfromlist.useClass = tags.useclass;
        this.devsChang2(tags.useclass);
        this.contfromlist.used = tags.used;
        this.moadl.visible = true;
      })
      this.custid = JSON.parse(localStorage.getItem("userinfo")).custid
      console.log(JSON.parse(localStorage.getItem("userinfo")))
      getDeviceReadList({params: {controllerId: tags.id}}).then((res) => {
        res.data.data.forEach((item) => {
          item.inoutType = item.inoutType + "";
          item.readHead = item.readHead + "";
          item.relays = item.relays + "";
        });
        this.contfromlist.door = res.data.data;
      });
      this.id = tags.id;
    },
    //删除按钮点击
    contdeletes(text, tags, i) {
      this.contId = tags.id;
      this.$refs.contdelete.visible = true;
    },
    //删除确定按钮的点击
    contdeleteId() {
      getDeleteDevice({id: this.contId})
          .then((res) => {
            const msg = res.data.msg;
            if (res.data.success) {
              this.$message.success(msg);
              this._getDeviceList();
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });

      this.$refs.contdelete.visible = false;
    },
    //
    handleAdd() {
      this.dataSource.push(this.formadd);
      this.contfromlist.door.push(this.formadd);
    },
    handledelete() {
    },
    //搜索框点击
    contSearch() {
      this._getDeviceList();
    },
    //保存读头
    contvmo(text, tags, i) {
      console.log(tags)
      if (this.islok) {
        this.visfrom.inoutType = tags.inoutType;
        this.visfrom.readHead = tags.readHead;
        this.visfrom.relays = tags.relays;
        this.visfrom.voice = tags.voice;
        this.visfrom.readDevId = tags.readDevId;
        this.visfrom.areaCode = this.areaCode;
        this.visfrom.controllerId = this.id;
        // this.visfrom.id = 0;
        this.visfrom.name = tags.name;
        saveDeviceRead(this.visfrom).then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
          } else {
            this.$message.error(msg);
          }
        });
      }
      this.contfromlist.door[i].isNew = false;
    },
    //修改读头
    contvmos(text, tags, i) {
      this.id = tags.id;
      this.visfrom.id = tags.id;
      //渲染新数据
      this.$set(this.contfromlist.door[i], "isNew", true);
    },
    //删除读头
    deletevmos(text, tags, i) {
      this.tagsId = tags.id;
      this.index = i;
      this.$refs.userdelete.visible = true;
    },
    //读头删除确定
    userdelete() {
      if (!this.islok) {
        this.contfromlist.door.splice(this.index, 1);
      } else {
        deleteReadById({id: this.tagsId}).then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
            getDeviceReadList({params: {controllerId: this.id}}).then(
                (res) => {
                  this.contfromlist.door = res.data.data;
                }
            );
          } else {
            this.$message.error(msg);
          }
        });
      }

      this.$refs.userdelete.visible = false;
    },

    //分页
    onShowcontChange(page, pageSize) {
      this.deviceList.page = page;
      this.deviceList.limit = pageSize;
      this.deviceList.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
    contPages(page, limit) {
      this.deviceList.page = page;
      this.deviceList.limit = limit;
      this.deviceList.start = (page - 1) * limit;
      this._getDeviceList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  height: 35px;
  align-items: center;
}

.search-a {
  width: 300px;
  height: 35px;
}

.ov_flex {
  display: flex;
  align-items: center;
}

.conter-table {
  margin-top: 30px;
}

.select-a {
  width: 200px;
}

.input-a {
  margin-left: 15px;
  height: 32px;
}

.chend {
  margin-left: 15px;
}

.pages {
  margin-top: 15px;
}

.fromlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 20px;
  width: 1120px;
}

.fromlist /deep/ .ant-form-item .ant-form-item-label {
  width: 80px;
}

.fromlist /deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: 200px;
}

.ant-form-item {
  display: flex;
  width: 350px;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 0;
}

/deep/ tr,
th {
  height: 64px !important;
}

.select-b {
  width: 133px !important;
}

.reds {
  color: rgb(255, 0, 0);
}

.greens {
  color: rgb(0, 255, 102);
}

.btns {
  margin: 0 0 0 15px;
}

/deep/ .ant-input-number {
  width: 200px !important;
}

.btn {
  font-size: 10px;
}

.widthbtn {
  width: 200px;
}
</style>
